<template>
  <view :class="[{ 'addpopup': true }, { 'addpopup_active': addShow }]">
    <view :class="[{ 'addpopup-mask': true }]" @click="cancel()" />
    <scroll-view :class="[{ 'addpopup-content': true }, { 'addpopup-content_active': addShow }]">
      <view class="wf x zb">
        <view class="addpopup-title">请选择收货地址</view>
        <view class="addpopup-address" @click="addAddress()">添加新地址</view>
      </view>
      <view v-if="addList.length" v-for="(item, index) in addList" :key="index" class="addpopup-item y"
        @click="selectAddr(item)">
        <view class="addpopup-item-addr">{{ item.addr }}</view>
        <view class="addpopup-item-name">{{ item.name }} {{ item.phone }}</view>
      </view>
      <view v-else class="addpopup-nodata">暂无地址，请添加收货地址</view>
      <view style="height: 10px;"></view>
    </scroll-view>
  </view>
</template>
<script lang="ts">
  import { defineComponent } from "vue";
  export default defineComponent({
    name: "SelectAddress",
    components: {},
    props: { addShow: { type: Boolean, default: false } },
    data() {
      return { addList: [] as gt.sql.addr[] };
    },
    created() {
      this.getAddd();
    },
    methods: {
      async getAddd() {
        const res = await gd.addr.read();
        if (Array.isArray(res)) {
          this.addList = res;
        }
        this.selectAddr(this.addList.find(e => e.def) || this.addList[0] || format.def.addr);
      },
      selectAddr(e: gt.sql.addr) {
        // 触发父组件方法
        this.$emit('selectAddr', e);
      },
      cancel() {
        this.$emit('update:addShow', false);
      },
      addAddress() {
        uni.navigateTo({ url: '/pages2/addr?create=1' });
      }
    },
  });
</script>
<style lang="scss" scoped>
  .addpopup {
    position: fixed;
    top: 0;
    bottom: -100%;
    left: 0;
    right: 0;
    z-index: -9;
    transition: all .2s;

    &_active {
      bottom: 0;
      z-index: 1;
      transition: all .2s;
    }

    &-mask {
      height: 100vh;
      width: 100%;
      background-color: rgba(0, 0, 0, .5);
    }

    &-content {
      position: absolute;
      bottom: 3em;
      left: 0;
      right: 0;
      max-height: 80vh;
      height: 0;
      padding: 0;
      background-color: #FFFFFF;
      z-index: 99;
      border-radius: 5rpx 5rpx 0 0;
      box-sizing: border-box;
      transition: height .3s;

      &_active {
        height: 80vh;
        padding: 20rpx;
        transition: height .3s;
      }
    }

    &-title {
      font-size: 1em;
      font-weight: 600;
      padding: 10rpx 0 15rpx 10rpx;
    }

    &-item {
      margin: 10rpx 0;
      font-size: .9em;
      border-bottom: 1px solid $uni-text-color-disable;
      padding-bottom: 0.2em;
      margin-bottom: 0.4em;
      &-addr {
        font-size: .8em;
        color: $uni-text-color;
      }
      &-name {
        color: $uni-text-color;
      }
    }
    &-address {
      font-size: 0.8em;
      color: $uni-text-color-grey;
      &::before {
        content: "\e645";
        color: $uni-color-success;
        margin-right: 1em;
      }
    }
    &-nodata {
      font-size: .8em;
      color: #999;
      text-align: center;
      margin-top: 10em;
    }
  }
</style>